<template>
  <div class="auth-manage">
    <!-- 左侧权限列表 -->
    <el-card class="auth-list-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title">
            <el-icon><Lock /></el-icon>
            权限列表
          </div>
          <div class="actions">
            <el-button type="primary" @click="handleAddAuth">
              <el-icon><Plus /></el-icon>新增权限
            </el-button>
          </div>
        </div>
      </template>

      <!-- 权限搜索和工具栏 -->
      <div class="toolbar">
        <div class="left">
          <el-input
            v-model="authSearchKey"
            placeholder="搜索权限"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="right">
          <el-button-group>
            <el-button type="success" @click="handleBatchEnable">
              <el-icon><CircleCheck /></el-icon>批量启用
            </el-button>
            <el-button type="warning" @click="handleBatchDisable">
              <el-icon><CircleClose /></el-icon>批量禁用
            </el-button>
            <el-button type="danger" @click="handleBatchDelete">
              <el-icon><Delete /></el-icon>批量删除
            </el-button>
          </el-button-group>
        </div>
      </div>

      <!-- 权限表格 -->
      <el-table
        :data="filteredAuthList"
        style="width: 100%"
        border
        stripe
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleAuthClick"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="权限名称" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="auth-name">
              <el-icon>
                <component :is="getAuthTypeIcon(row.type)" />
              </el-icon>
              <span>{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限标识" show-overflow-tooltip />
        <el-table-column prop="type" label="权限类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getAuthTypeTag(row.type)">
              {{ getAuthTypeName(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="'enabled'"
              :inactive-value="'disabled'"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="关联菜单" width="100">
          <template #default="{ row }">
            <el-tooltip
              :content="getMenuNames(row.menuIds)"
              placement="top"
              :show-after="200"
            >
              <el-tag type="info" effect="plain">
                {{ row.menuIds?.length || 0 }}个
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="80" sortable />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-tooltip content="编辑" placement="top">
                <el-button link type="primary" @click.stop="handleEdit(row)">
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="danger" @click.stop="handleDelete(row)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 右侧菜单树 -->
    <el-card class="menu-tree-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="title">
            <el-icon><Menu /></el-icon>
            {{ currentAuth ? `${currentAuth.name}的关联菜单` : '请选择权限' }}
          </span>
          <div class="actions" v-if="currentAuth">
            <el-button type="primary" @click="handleSaveMenuAuth">
              <el-icon><Check /></el-icon>保存关联
            </el-button>
          </div>
        </div>
      </template>

      <template v-if="currentAuth">
        <div class="search-bar">
          <el-input
            v-model="menuSearchKey"
            placeholder="搜索菜单"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <el-tree
          ref="menuTreeRef"
          :data="menuList"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          :default-checked-keys="currentAuth?.menuIds"
          :filter-node-method="filterNode"
          @check="handleTreeCheck"
        >
          <template #default="{ node, data }">
            <div class="custom-tree-node" :class="{ 'is-checked': isNodeChecked(data.id) }">
              <el-icon>
                <component :is="data.icon || (data.children ? 'Folder' : 'Document')" />
              </el-icon>
              <span class="label">{{ node.label }}</span>
              <el-tag v-if="data.type" size="small" :type="getMenuTagType(data.type)">
                {{ getMenuTypeName(data.type) }}
              </el-tag>
            </div>
          </template>
        </el-tree>
      </template>

      <el-empty v-else description="请先选择左侧权限" />
    </el-card>

    <!-- 权限表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="formData.id ? '编辑权限' : '新增权限'"
      width="600px"
      destroy-on-close
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入权限名称" />
        </el-form-item>

        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" placeholder="请输入权限标识">
            <template #append>
              <el-tooltip content="权限标识格式：模块:操作[:子操作]">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="权限类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择权限类型">
            <el-option label="菜单权限" value="menu" />
            <el-option label="按钮权限" value="button" />
            <el-option label="数据权限" value="data" />
            <el-option label="接口权限" value="api" />
          </el-select>
        </el-form-item>

        <!-- 数据权限配置 -->
        <template v-if="formData.type === 'data'">
          <el-form-item label="数据范围" prop="dataScope">
            <el-select v-model="formData.dataScope" placeholder="请选择数据范围">
              <el-option label="全部数据" value="all" />
              <el-option label="自定义数据" value="custom" />
              <el-option label="本部门数据" value="dept" />
              <el-option label="仅本人数据" value="self" />
            </el-select>
          </el-form-item>

          <el-form-item 
            v-if="formData.dataScope === 'custom'" 
            label="自定义部门" 
            prop="customDepts"
          >
            <el-tree-select
              v-model="formData.customDepts"
              :data="deptOptions"
              multiple
              placeholder="请选择部门"
            />
          </el-form-item>
        </template>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="3"
            placeholder="请输入权限描述"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import {
  Lock, Plus, Edit, Delete, Setting, Search, QuestionFilled,
  RefreshRight, Download, Upload, View, Hide, Link, Position,
  CircleCheck, CircleClose, InfoFilled, Warning, Menu, Check,
  Document, ArrowUp, ArrowDown
} from '@element-plus/icons-vue'

// 权限类型定义
interface AuthItem {
  id: string | number
  name: string
  code: string
  type: 'menu' | 'button' | 'data' | 'api'
  status: 'enabled' | 'disabled'
  description?: string
  menuIds?: (string | number)[] // 关联的菜单ID列表
  createTime?: string
  updateTime?: string
  sort: number
  // 数据权限相关
  dataScope?: 'all' | 'custom' | 'dept' | 'self'
  customDepts?: number[]
  conditions?: {
    field: string
    operator: string
    value: any
  }[]
}

// 菜单项接口
interface MenuItem {
  id: number | string
  title: string
  path?: string
  type: 'menu' | 'button' | 'api'
  icon?: string
  children?: MenuItem[]
  auths?: AuthItem[] // 关联的权限列表
}

// 添加数据权限条件接口
interface DataCondition {
  field: string
  operator: 'eq' | 'ne' | 'gt' | 'lt' | 'in' | 'like'
  value: any
}

// 状态定义
const searchKey = ref('')
const currentAuth = ref<AuthItem | null>(null)
const formRef = ref<FormInstance>()
const authList = ref<AuthItem[]>([])

// 表单数据
const formData = ref<AuthItem>({
  id: '',
  name: '',
  code: '',
  type: 'menu',
  description: '',
  status: 'enabled',
  sort: 0
})

// 表单校验规则
const formRules = {
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入权限标识', trigger: 'blur' },
    { pattern: /^[a-z]+:[a-z]+(?::[a-z]+)*$/, message: '格式：模块:操作[:子操作]', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择权限类型', trigger: 'change' }
  ],
  sort: [
    { required: true, message: '请输入排序号', trigger: 'blur' },
    { type: 'number', message: '排序号必须为数字', trigger: 'blur' }
  ],
  dataScope: [
    { 
      required: true, 
      message: '请选择数据范围', 
      trigger: 'change',
      validator: (rule: any, value: any) => {
        if (formData.value.type === 'data' && !value) {
          return new Error('请选择数据范围')
        }
        return true
      }
    }
  ],
  customDepts: [
    { 
      validator: (rule: any, value: any) => {
        if (formData.value.type === 'data' && 
            formData.value.dataScope === 'custom' && 
            (!value || value.length === 0)) {
          return new Error('请至少选择一个部门')
        }
        return true
      },
      trigger: 'change'
    }
  ]
}

// 在 script setup 中添加菜单树数据
const menuList = ref<MenuItem[]>([
  {
    id: 1,
    title: '系统管理',
    path: '/system',
    type: 'menu',
    icon: 'Setting',
    children: [
      {
        id: 11,
        title: '用户管理',
        path: '/system/user',
        type: 'menu',
        icon: 'User',
        children: [
          {
            id: 111,
            title: '新增用户',
            type: 'button',
            icon: 'Plus'
          },
          {
            id: 112,
            title: '编辑用户',
            type: 'button',
            icon: 'Edit'
          },
          {
            id: 113,
            title: '删除用户',
            type: 'button',
            icon: 'Delete'
          }
        ]
      },
      {
        id: 12,
        title: '角色管理',
        path: '/system/role',
        type: 'menu',
        icon: 'UserFilled',
        children: [
          {
            id: 121,
            title: '新增角色',
            type: 'button',
            icon: 'Plus'
          },
          {
            id: 122,
            title: '编辑角色',
            type: 'button',
            icon: 'Edit'
          }
        ]
      },
      {
        id: 13,
        title: '权限管理',
        path: '/system/auth',
        type: 'menu',
        icon: 'Lock'
      }
    ]
  },
  {
    id: 2,
    title: '内容管理',
    path: '/content',
    type: 'menu',
    icon: 'Document',
    children: [
      {
        id: 21,
        title: '文章管理',
        path: '/content/article',
        type: 'menu',
        icon: 'Document',
        children: [
          {
            id: 211,
            title: '发布文章',
            type: 'button',
            icon: 'Upload'
          },
          {
            id: 212,
            title: '审核文章',
            type: 'button',
            icon: 'Check'
          }
        ]
      },
      {
        id: 22,
        title: '分类管理',
        path: '/content/category',
        type: 'menu',
        icon: 'Folder'
      }
    ]
  }
])

// 修改权限列表的模拟数据
const mockAuthList: AuthItem[] = [
  {
    id: 1,
    name: '系统管理权限',
    code: 'system:manage',
    type: 'menu',
    status: 'enabled',
    description: '系统管理模块权限',
    createTime: '2024-01-01 12:00:00',
    sort: 1,
    menuIds: [1] // 关联系统管理菜单
  },
  {
    id: 2,
    name: '用户管理权限',
    code: 'user:manage',
    type: 'menu',
    status: 'enabled',
    description: '用户管理模块权限',
    createTime: '2024-01-01 12:00:00',
    sort: 2,
    menuIds: [11, 111, 112, 113] // 关联用户管理及其按钮
  },
  {
    id: 3,
    name: '角色管理权限',
    code: 'role:manage',
    type: 'menu',
    status: 'enabled',
    description: '角色管理模块权限',
    createTime: '2024-01-01 12:00:00',
    sort: 3,
    menuIds: [12, 121, 122] // 关联角色管理及其按钮
  },
  {
    id: 4,
    name: '内容管理权限',
    code: 'content:manage',
    type: 'menu',
    status: 'enabled',
    description: '内容管理模块权限',
    createTime: '2024-01-01 12:00:00',
    sort: 4,
    menuIds: [2] // 关联内容管理菜单
  }
]

// 选中的行数据
const selectedRows = ref<AuthItem[]>([])

// 在 script setup 中添加
const menuTreeRef = ref()
const menuSearchKey = ref('')
const authSearchKey = ref('')
const currentMenu = ref<MenuItem | null>(null)
const dialogVisible = ref(false)
const loading = ref(false)

// 部门选项
const deptOptions = ref([
  {
    value: 1,
    label: '总公司',
    children: [
      { value: 2, label: '研发部' },
      { value: 3, label: '市场部' },
      { value: 4, label: '运营部' }
    ]
  }
])

// 获取数据范围名称
const getDataScopeName = (scope?: string) => {
  const map: Record<string, string> = {
    all: '全部数据',
    custom: '自定义数据',
    dept: '本部门数据',
    self: '仅本人数据'
  }
  return map[scope || ''] || '未设置'
}

// 处理菜单点击
const handleNodeClick = (data: MenuItem) => {
  currentMenu.value = data
  loading.value = true
  // 模拟加载
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 过滤菜单节点
const filterNode = (value: string, data: MenuItem) => {
  if (!value) return true
  return data.title.includes(value)
}

// 监听菜单搜索关键字变化
watch(menuSearchKey, (val) => {
  menuTreeRef.value?.filter(val)
})

// 修改计算属性，显示所有权限列表
const filteredAuthList = computed(() => {
  if (!authSearchKey.value) return authList.value
  return authList.value.filter(item =>
    item.name.includes(authSearchKey.value) ||
    item.code.includes(authSearchKey.value)
  )
})

// 初始化数据
onMounted(() => {
  // 设置初始权限列表数据
  authList.value = mockAuthList
  // 设置默认选中第一个权限
  if (mockAuthList.length > 0) {
    handleAuthClick(mockAuthList[0])
  }
})

// 处理表格选择变化
const handleSelectionChange = (selection: AuthItem[]) => {
  selectedRows.value = selection
}

// 处理查看详情
const handleView = (row: AuthItem) => {
  currentAuth.value = row
  formData.value = { ...row }
}

// 处理状态变更
const handleStatusChange = (row: AuthItem) => {
  const action = row.status === 'enabled' ? '启用' : '禁用'
  ElMessage.success(`${action}成功`)
}

// 处理刷新
const handleRefresh = () => {
  // 模拟刷新
  ElMessage.success('刷新成功')
  authList.value = [...mockAuthList]
}

// 处理导出
const handleExport = () => {
  const data = JSON.stringify(authList.value, null, 2)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'auth-list.json'
  link.click()
  URL.revokeObjectURL(url)
  ElMessage.success('导出成功')
}

// 处理导入
const handleImport = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.json'
  input.onchange = (e: Event) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        try {
          const data = JSON.parse(e.target?.result as string)
          authList.value = data
          ElMessage.success('导入成功')
        } catch (error) {
          ElMessage.error('导入失败，请检查文件格式')
        }
      }
      reader.readAsText(file)
    }
  }
  input.click()
}

// 处理批量启用
const handleBatchEnable = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要启用的权限')
    return
  }
  selectedRows.value.forEach(row => {
    row.status = 'enabled'
  })
  ElMessage.success('批量启用成功')
}

// 处理批量禁用
const handleBatchDisable = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要禁用的权限')
    return
  }
  selectedRows.value.forEach(row => {
    row.status = 'disabled'
  })
  ElMessage.success('批量禁用成功')
}

// 处理批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的权限')
    return
  }
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} 个权限吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const ids = selectedRows.value.map(row => row.id)
    authList.value = authList.value.filter(item => !ids.includes(item.id))
    ElMessage.success('批量删除成功')
  })
}

// 修改新增权限方法
const handleAddAuth = () => {
  dialogVisible.value = true
  currentAuth.value = null
  formData.value = {
    id: '',
    name: '',
    code: '',
    type: 'menu',
    description: '',
    status: 'enabled',
    sort: authList.value.length + 1,
    menuIds: []
  }
}

// 修改编辑方法
const handleEdit = (row: AuthItem) => {
  dialogVisible.value = true
  currentAuth.value = row
  formData.value = {
    ...row,
    // 确保所有必要字段都被复制
    id: row.id,
    name: row.name,
    code: row.code,
    type: row.type,
    description: row.description || '',
    status: row.status,
    sort: row.sort,
    menuIds: row.menuIds || [],
    dataScope: row.dataScope || 'all',
    customDepts: row.customDepts || []
  }
}

// 修改表单提交方法
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      if (formData.value.id) {
        // 编辑
        const index = authList.value.findIndex(item => item.id === formData.value.id)
        if (index !== -1) {
          authList.value[index] = { 
            ...authList.value[index],
            ...formData.value,
            updateTime: new Date().toLocaleString()
          }
          ElMessage.success('编辑成功')
        }
      } else {
        // 新增
        const newAuth = {
          ...formData.value,
          id: Date.now(),
          createTime: new Date().toLocaleString(),
          updateTime: new Date().toLocaleString(),
          status: 'enabled',
          menuIds: [] // 初始化空的菜单关联
        }
        authList.value.push(newAuth)
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
      currentAuth.value = null
    }
  })
}

// 添加对话框关闭前的处理
const handleClose = (done: () => void) => {
  ElMessageBox.confirm(
    '确认关闭？未保存的数据将会丢失',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      done()
    })
    .catch(() => {})
}

// 修改删除处理方法
const handleDelete = (row: AuthItem) => {
  ElMessageBox.confirm(
    '确定要删除该权限吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    authList.value = authList.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
    if (currentAuth.value?.id === row.id) {
      currentAuth.value = null
      formData.value = {
        id: '',
        name: '',
        code: '',
        type: 'menu',
        description: '',
        status: 'enabled',
        sort: 0
      }
    }
  })
}

// 获取权限类型标签样式
const getAuthTypeTag = (type: string) => {
  const map: Record<string, string> = {
    menu: 'success',
    button: 'warning',
    data: 'info',
    api: 'danger'
  }
  return map[type] || 'info'
}

// 获取权限类型名称
const getAuthTypeName = (type: string) => {
  const map: Record<string, string> = {
    menu: '菜单权限',
    button: '按钮权限',
    data: '数据权限',
    api: '接口权限'
  }
  return map[type] || '未知类型'
}

// 修改处理权限点击的方法
const handleAuthClick = (row: AuthItem) => {
  currentAuth.value = row
  loading.value = true
  // 模拟加载效果
  setTimeout(() => {
    if (menuTreeRef.value) {
      // 设置选中状态
      menuTreeRef.value.setCheckedKeys(row.menuIds || [])
      // 展开所有节点
      menuTreeRef.value.store.nodesMap[1].expanded = true
      menuTreeRef.value.store.nodesMap[2].expanded = true
    }
    loading.value = false
  }, 300)
}

const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 修改保存菜单关联的方法
const handleSaveMenuAuth = () => {
  if (!currentAuth.value || !menuTreeRef.value) return
  const checkedKeys = menuTreeRef.value.getCheckedKeys()
  const halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys()
  const allCheckedKeys = [...checkedKeys, ...halfCheckedKeys]
  
  // 更新权限的菜单关联
  currentAuth.value.menuIds = allCheckedKeys
  
  // 更新权限列表中的数据
  const index = authList.value.findIndex(item => item.id === currentAuth.value?.id)
  if (index !== -1) {
    authList.value[index] = { 
      ...currentAuth.value,
      menuIds: allCheckedKeys
    }
  }
  
  ElMessage.success('保存关联成功')
}

// 添加树节点属性配置
const defaultProps = {
  children: 'children',
  label: 'title'
}

// 添加获取菜单标签类型的方法
const getMenuTagType = (type: string) => {
  const map: Record<string, string> = {
    menu: 'success',
    button: 'warning',
    api: 'info'
  }
  return map[type] || 'info'
}

// 添加获取菜单类型名称的方法
const getMenuTypeName = (type: string) => {
  const map: Record<string, string> = {
    menu: '菜单',
    button: '按钮',
    api: '接口'
  }
  return map[type] || '未知'
}

// 添加检查节点是否选中的方法
const isNodeChecked = (nodeId: string | number) => {
  return currentAuth.value?.menuIds?.includes(nodeId)
}

// 修改树节点选中状态变化的处理方法
const handleTreeCheck = (data: any, { checkedKeys, checkedNodes }: any) => {
  if (currentAuth.value) {
    // 更新当前权限的菜单关联
    currentAuth.value.menuIds = checkedKeys
  }
}

// 添加权限类型图标映射
const getAuthTypeIcon = (type: string) => {
  const map: Record<string, any> = {
    menu: Menu,
    button: Position,
    data: Document,
    api: Link
  }
  return map[type] || Document
}

// 添加排序相关方法
const handleSortChange = (column: any) => {
  if (column.prop === 'sort') {
    authList.value.sort((a, b) => a.sort - b.sort)
  }
}

// 添加获取菜单名称的方法
const getMenuNames = (menuIds?: (string | number)[]) => {
  if (!menuIds?.length) return '未关联菜单'
  const names: string[] = []
  const findMenuName = (menus: MenuItem[], id: string | number) => {
    for (const menu of menus) {
      if (menu.id === id) {
        names.push(menu.title)
        return
      }
      if (menu.children?.length) {
        findMenuName(menu.children, id)
      }
    }
  }
  menuIds.forEach(id => findMenuName(menuList.value, id))
  return names.join('、') || '未找到相关菜单'
}
</script>

<style lang="scss" scoped>
.auth-manage {
  display: flex;
  gap: 24px;
  height: 100%;
  animation: fade-in 0.4s ease-out; // 页面载入动画
  
  // 卡片公共样式
  .el-card {
    border: none;
    background: linear-gradient(145deg, #ffffff, #f5f7fa);
    box-shadow: 5px 5px 15px #e8eaed,
               -5px -5px 15px #ffffff;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    &:hover {
      transform: translateY(-3px);
    }
    
    :deep(.el-card__header) {
      border-bottom: none;
      background: linear-gradient(145deg, var(--el-color-primary-light-9), #ffffff);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--el-color-primary);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: left;
      }
      
      &:hover::before {
        transform: scaleX(1);
      }
      
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;

        .title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 16px;
          font-weight: 600;
          color: var(--el-color-primary);

          .el-icon {
            font-size: 18px;
            background: var(--el-color-primary-light-9);
            padding: 6px;
            border-radius: 8px;
          }
        }

        .actions {
          .el-button {
            padding: 6px 12px;
            font-size: 13px;
            border-radius: 6px;
            background: var(--el-color-primary);
            border: none;
            
            &::before {
              content: '';
              position: absolute;
              inset: 0;
              background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.2), 
                transparent
              );
              transform: translateX(-100%);
              transition: transform 0.5s ease;
            }
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.3);
              
              &::before {
                transform: translateX(100%);
              }
              
              .el-icon {
                transform: rotate(180deg);
              }
            }
            
            .el-icon {
              margin-right: 4px;
              transition: transform 0.5s ease;
            }
          }
        }
      }
    }
  }
  
  // 左侧权限列表
  .auth-list-card {
    width: 65%;
    
    .toolbar {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      
      .search-input {
        width: 240px;
        
        :deep(.el-input__wrapper) {
          transition: all 0.3s ease;
          border: 1px solid transparent;
          
          &:hover, &:focus-within {
            border-color: var(--el-color-primary);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.1);
          }
          
          .el-input__prefix-inner {
            transition: transform 0.3s ease;
          }
          
          &:focus-within .el-input__prefix-inner {
            transform: rotate(-90deg);
          }
        }
      }
      
      .el-button-group {
        display: flex;
        gap: 12px;

        .el-button {
          height: 36px;
          padding: 0 16px;
          border: 2px solid transparent;
          position: relative;
          overflow: hidden;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              120deg,
              transparent,
              rgba(255, 255, 255, 0.3),
              transparent
            );
            transform: translateX(-100%);
          }

          &:hover {
            transform: translateY(-2px);
            border-color: currentColor;
            
            &::before {
              animation: shine 0.8s ease;
            }
            
            .el-icon {
              transform: scale(1.2);
            }
          }

          .el-icon {
            margin-right: 6px;
            font-size: 16px;
            transition: all 0.3s ease;
          }

          // 批量操作按钮样式
          &.el-button--success {
            background: #67c23a;
            color: white;
            box-shadow: 0 2px 6px rgba(103, 194, 58, 0.2);
            
            &:hover {
              background: #85ce61;
              box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
            }
          }

          &.el-button--warning {
            background: #e6a23c;
            color: white;
            box-shadow: 0 2px 6px rgba(230, 162, 60, 0.2);
            
            &:hover {
              background: #ebb563;
              box-shadow: 0 4px 12px rgba(230, 162, 60, 0.4);
            }
          }

          &.el-button--danger {
            background: #f56c6c;
            color: white;
            box-shadow: 0 2px 6px rgba(245, 108, 108, 0.2);
            
            &:hover {
              background: #f78989;
              box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
            }
          }
        }
      }
    }
  }
  
  // 右侧菜单树
  .menu-tree-card {
    flex: 1;
    
    :deep(.el-tree) {
      background: transparent;
      
      .el-tree-node {
        &:hover > .el-tree-node__content {
          background: var(--el-color-primary-light-9);
        }
        
        &.is-current > .el-tree-node__content {
          background: var(--el-color-primary-light-8);
          color: var(--el-color-primary);
        }
        
        .el-tree-node__content {
          height: 40px;
          border-radius: 6px;
          margin: 4px 0;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateX(5px);
          }
          
          .el-tree-node__expand-icon {
            transition: all 0.3s ease;
            
            &.expanded {
              transform: rotate(90deg);
            }
          }
        }
      }
    }
    
    .custom-tree-node {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      
      .el-icon {
        padding: 4px;
        border-radius: 6px;
        transition: all 0.3s ease;
      }
      
      &.is-checked {
        color: var(--el-color-primary);
        
        .el-icon {
          background: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
          transform: rotate(15deg);
        }
      }
    }
  }
}

// 动画定义
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

// 标签动画效果
.el-tag {
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: translateX(-100%);
  }
  
  &:hover::before {
    animation: shine-tag 0.8s ease;
  }
}

@keyframes shine-tag {
  100% {
    transform: translateX(100%);
  }
}

// 修改操作列按钮样式
.el-table {
  :deep(.el-button-group) {
    display: flex;
    gap: 8px;
    justify-content: center;
    
    .el-button {
      position: relative;
      height: 32px;
      padding: 0 12px;
      border-radius: 6px;
      overflow: hidden;
      border: none;
      transition: all 0.3s ease;
      
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          120deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent
        );
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &:hover {
        transform: translateY(-2px);
        
        &::before {
          opacity: 1;
        }
      }
      
      &.el-button--primary {
        background: var(--el-color-primary-light-8);
        color: var(--el-color-primary-dark-2);
        
        &:hover {
          background: var(--el-color-primary-light-7);
          box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.2);
        }
        
        .el-icon {
          color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);
          padding: 4px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      
      &.el-button--danger {
        background: var(--el-color-danger-light-8);
        color: var(--el-color-danger-dark-2);
        
        &:hover {
          background: var(--el-color-danger-light-7);
          box-shadow: 0 4px 12px rgba(var(--el-color-danger-rgb), 0.2);
        }
        
        .el-icon {
          color: var(--el-color-danger);
          background: var(--el-color-danger-light-9);
          padding: 4px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      
      .el-icon {
        transition: all 0.3s ease;
      }
      
      &:hover .el-icon {
        transform: scale(1.2) rotate(15deg);
      }
    }
  }
}
</style> 